<template>
  <div>
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;">
    </breadcrumb>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card class="common-card">
          <p class="cardTitle">设备</p>
          <div class="outBox">
            <div class="imgBox">
              <img src="~@/assets/images/equipment.jpg" alt="" class="img">
            </div>
            <div class="rightBox">
              <p>设备厂商： 美的-上海</p>
              <p>出厂编号：8888888</p>
              <p>设备型号：{{ currentPro.equipmentCode }}</p>
              <p>安装位置： 经度/162.0 纬度/198.3</p>
              <p>电辅加热器：5689442</p>
              <p>网关编号：{{ currentPro.netCode }}</p>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="10" :style="{ marginBottom: '24px' }">
        <a-card class="common-card">
          <p class="cardTitle">实时监控</p>
          <a-row :gutter="16">
            <div style="display:flex;">
              <div class="col-box">
                <p class="top-p">供水温度℃</p>
                <p style="color:#FF6600;text-align:center;" class="bottom-p">{{ currentPro.supplyWaterTemperature }}</p>
              </div>
              <div>
                <a-divider type="vertical" class="col-box-ver"/>
              </div>
              <div class="col-box">
                <p class="top-p">回水温度℃</p>
                <p style="color:#74C600;text-align:center;" class="bottom-p">{{ currentPro.returnWaterTemperature }}</p>
              </div>
              <div>
                <a-divider type="vertical" class="col-box-ver"/>
              </div>
              <div class="col-box">
                <p class="top-p">室内温度℃</p>
                <p style="text-align:center;" class="bottom-p"> 33 </p>
              </div>
              <div>
                <a-divider type="vertical" class="col-box-ver"/>
              </div>
              <div class="col-box">
                <p class="top-p">室外温度℃</p>
                <p style="color:#3366FF;text-align:center;" class="bottom-p"> 28 </p>
              </div>
            </div>
          </a-row>
          <a-row :gutter="16" style="margin-top:10px;">
            <a-col :sm="24" :md="12" :xl="6">
              <p class="top-p">开关机状态</p>
              <a-switch checkedChildren="开" unCheckedChildren="关" defaultChecked style="font-size:4px;"/>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <p class="top-p">模式切换</p>
              <div>
                <a-button-group defaultValue="1">
                  <a-button size="small" style="font-size:4px;" >制冷</a-button>
                  <a-button size="small" style="font-size:4px;" value="2">制热</a-button>
                </a-button-group>
                <!-- <a-radio-group defaultValue="1">
                  <a-radio-button value="1">top</a-radio-button>
                  <a-radio-button value="2">bottom</a-radio-button>
                </a-radio-group> -->
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="10">
              <div class="seeting">
                <p class="top-p">设定温度</p>
                <span style="margin-bottom:10px;" @click="seetingParamers"><a-icon type="tool" style="font-size:14px;"/></span>
              </div>
              <div>
                <a-button-group defaultValue="1">
                  <a-button size="small" style="font-size:4px;" value="1">供水</a-button>
                  <a-button size="small" style="font-size:4px;" value="2">室内</a-button>
                  <a-button size="small" style="font-size:4px;" value="3">回水</a-button>
                </a-button-group>
                <!-- <a-radio-group defaultValue="a">
                  <a-radio-button value="a" style="font-size:2px;padding:0 5px;">供水</a-radio-button>
                  <a-radio-button value="b" size="small" style="font-size:2px;padding:0 5px;">室内</a-radio-button>
                  <a-radio-button value="c" size="small" style="font-size:2px;padding:0 5px;">回水</a-radio-button>
                </a-radio-group> -->
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-card class="common-card">
          <div class="seeting">
            <p class="cardTitle">报警/日志</p>
            <a-button class="common-btn" @click="resetting" size="small" style="font-size:4px;margin-bottom:10px;">复位</a-button>
          </div>
          <ul>
            <li>
              <p>
                <span>2019/12/20</span>
                <span style="margin:0 5px;">10:10:10</span>
                <span>开机</span>
              </p>
            </li>
            <li>
              <p class="text-p">
                <span>2019/12/20</span>
                <span style="margin:0 5px;">10:10:10</span>
                <span >机器切换至节能-WIFI模式运行</span>
              </p>
            </li>
            <li>
              <p class="text-p">
                <span>2019/12/20</span>
                <span style="margin:0 5px;">12:10:10</span>
                <span >机器切换至WIFI模式运行</span>
              </p>
            </li>
            <li>
              <p class="text-p">
                <span>2019/12/20</span>
                <span style="margin:0 5px;">13:10:10</span>
                <span >机器切换至轻奢加湿模式运行</span>
              </p>
            </li>
            <li>
              <p class="text-p">
                <span>2019/12/20</span>
                <span style="margin:0 5px;">14:50:10</span>
                <span style="color:#FF0033;margin:0 3px;">报警</span>
                <a-button class="common-btn" @click="unusualTest" size="small" style="font-size:2px;margin:0 3px 10px;height:16px;" v-if="isShowText">异常诊断</a-button>
                <a-button class="common-btn" @click="testRes" size="small" style="font-size:2px;margin-bottom:10px;height:16px;" v-if="isShowRes">诊断结果</a-button>
              </p>
            </li>
            <li>
              <p class="text-p">
                <span>2019/12/20</span>
                <span style="margin:0 5px;">15:50:10</span>
                <span style="color:#FF0033;margin:0 3px;">报警</span>
                <a-button class="common-btn" @click="unusualTest1" size="small" style="font-size:2px;margin:0 3px 10px;height:16px;" v-if="isShowText1">异常诊断</a-button>
                <a-button class="common-btn" @click="testRes1" size="small" style="font-size:2px;margin-bottom:10px;height:16px;" v-if="isShowRes1">诊断结果</a-button>
              </p>
            </li>
          </ul>
        </a-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div>
        <a-tabs default-active-key="2" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="工程信息" key="1">
            <a-row>
              <a-col :span="10" class="card-child">
                <a-card title="施工安装图片" :bordered="false" >
                  <div class="img-box">
                    <img src="~@/assets/images/equipment.jpg" alt="" class="img-img">
                  </div>
                  <p><span style="font-weight:700;">施工现场情况说明：</span><span>加快热源和供热网扩容改造，最大限度扩大集中供热面积。集中供热全覆盖工程费用结合本地热源开展相应的集中供热扩容工程。</span></p>
                </a-card>
              </a-col>
              <a-col :span="12" style="margin-left:20px;" class="card-child">
                <a-row>
                  <a-col :span="11">
                    <a-card title="设备信息" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>设备厂商： 美的-上海</p>
                        <p>出厂编号：8888888</p>
                        <p>设备型号：{{ currentPro.equipmentCode }}</p>
                        <p>安装位置： 经度/162.0 纬度/198.3</p>
                        <p>电辅加热器：5689442</p>
                        <p>网关编号：{{ currentPro.netCode }}</p>
                      </div>
                    </a-card>
                  </a-col>
                  <a-col :span="10" style="margin-left:10px;">
                    <a-card title="户主信息" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>姓名： 郭靖</p>
                        <p>联系电话：18888888999</p>
                        <p>地址：太原市小店区北格镇柳家乡大门村102室</p>
                        <p>建筑面积： 256平方米</p>
                        <p>建筑类型：非节能建筑</p>
                      </div>
                    </a-card>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="7">
                    <a-card title="勘查设计图" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>设计单位</p>
                        <p style="margin:10px 0;text-align:center">山东聊城钢材有限公司</p>
                        <a-button class="common-btn" style="font-size:8px;">查看设计图</a-button>
                      </div>
                    </a-card>
                  </a-col>
                  <a-col :span="7" style="margin-left:10px;">
                    <a-card title="安装协议" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>安装单位</p>
                        <p style="margin:10px 0;text-align:center">山东聊城钢材有限公司</p>
                        <a-button class="common-btn" style="font-size:8px;">查看协议</a-button>
                      </div>
                    </a-card>
                  </a-col>
                  <a-col :span="7" style="margin-left:10px;">
                    <a-card title="操作说明" :bordered="false">
                      <div style="font-size:12px;text-align:center;" class="div-p">
                        <p style="margin-top:25px;;text-align:center">使用说明书</p>
                        <a-button class="common-btn" style="font-size:8px;margin-top:10px;">查看</a-button>
                      </div>
                    </a-card>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="运行" key="2">
            <a-row :gutter="16" style="margin-bottom:20px;">
              <div style="display:flex;padding:0 24px;">
                <div style="display:flex;width:100px;justify-content:space-between;align-items:center;">
                  <a>时</a>
                  <a>日</a>
                  <a>供暖季</a>
                  <a>年</a>
                </div>
                <a-range-picker :style="{width: '256px'}" style="margin:0 8px;"/>
                <a-button class="common-btn" @click="toSearch('2')">查询</a-button>
              </div>
            </a-row>
            <a-row style="width:100%;" :gutter="16">
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <mix-line/>
              </a-col>
            </a-row>
            <a-row style="width:100%;" :gutter="16">
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <a-table :columns="columns" :dataSource="dataFirst" bordered :pagination="false">
                </a-table>
              </a-col>
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <a-table :columns="columns" :dataSource="dataSecond" bordered :pagination="false">
                </a-table>
              </a-col>
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <a-table :columns="columns" :dataSource="dataThird" bordered :pagination="false">
                </a-table>
              </a-col>
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <a-table :columns="columns" :dataSource="dataFour" bordered :pagination="false">
                </a-table>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="维修工单信息" key="3">
            <a-row>
              <a-col :span="10" class="card-child">
                <a-card title="施工安装图片" :bordered="false" >
                  <div class="img-box">
                    <img src="~@/assets/images/equipment.jpg" alt="" class="img-img">
                  </div>
                  <p><span style="font-weight:700;">施工现场情况说明：</span><span>加快热源和供热网扩容改造，最大限度扩大集中供热面积。集中供热全覆盖工程费用结合本地热源开展相应的集中供热扩容工程。</span></p>
                </a-card>
              </a-col>
              <a-col :span="12" style="margin-left:20px;" class="card-child">
                <a-row>
                  <a-col :span="11">
                    <a-card title="设备信息" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>设备厂商： 美的-上海</p>
                        <p>出厂编号：8888888</p>
                        <p>设备型号：{{ currentPro.equipmentCode }}</p>
                        <p>安装位置： 经度/162.0 纬度/198.3</p>
                        <p>电辅加热器：5689442</p>
                        <p>网关编号：{{ currentPro.netCode }}</p>
                      </div>
                    </a-card>
                  </a-col>
                  <a-col :span="10" style="margin-left:10px;">
                    <a-card title="户主信息" :bordered="false">
                      <div style="font-size:12px;" class="div-p">
                        <p>姓名： 郭靖</p>
                        <p>联系电话：18888888999</p>
                        <p>地址：太原市小店区北格镇柳家乡大门村102室</p>
                        <p>建筑面积： 256平方米</p>
                        <p>建筑类型：非节能建筑</p>
                      </div>
                    </a-card>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-card title="维修工单信息" :bordered="false">
                      <a-table
                        :columns="columnsB"
                        :dataSource="loadData"
                        bordered
                        :loading="loading"
                        :pagination="false"
                        :scroll="{ x: 800 }">
                      </a-table>
                    </a-card>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="能效" key="4">
            <a-row>
              <a-col :span="8">
                <a-card :bordered="false">
                  <doughnut-chart></doughnut-chart>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card :bordered="false">
                  <power-bar-chart></power-bar-chart>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card :bordered="false">
                  <discharge-bar-chart></discharge-bar-chart>
                </a-card>
              </a-col>
            </a-row>
            <a-card title="终止温度" :bordered="false">
              <table border="1" cellpadding="16">
                <tbody>
                  <tr>
                    <th colspan="1">℃</th>
                    <th colspan="1"></th>
                    <th colspan="1">-15</th>
                    <th colspan="1">-10</th>
                    <th colspan="1">-5</th>
                    <th colspan="1">0</th>
                    <th colspan="1">5</th>
                    <th colspan="1">10</th>
                    <th colspan="1">15</th>
                    <th colspan="1">20</th>
                    <th colspan="1">25</th>
                    <th colspan="1">30</th>
                    <th colspan="1">35</th>
                  </tr>
                  <tr>
                    <th rowspan="2">35</th>
                    <th>输入功率</th>
                    <th>1500</th>
                    <th>1532</th>
                    <th>1111</th>
                    <th>888</th>
                    <th>4435</th>
                    <th>1676</th>
                    <th>2434</th>
                    <th>332</th>
                    <th>1566</th>
                    <th>2323</th>
                    <th>1231</th>
                  </tr>
                  <tr>
                    <th>功能比</th>
                    <th>57</th>
                    <th>88</th>
                    <th>57</th>
                    <th>77</th>
                    <th>67</th>
                    <th>88</th>
                    <th>46</th>
                    <th>34</th>
                    <th>56</th>
                    <th>67</th>
                    <th>77</th>
                  </tr>
                  <tr>
                    <th rowspan="2">40</th>
                    <th>输入功率</th>
                    <th>1200</th>
                    <th>1456</th>
                    <th>2333</th>
                    <th>332</th>
                    <th>222</th>
                    <th>456</th>
                    <th>3423</th>
                    <th>2345</th>
                    <th>1234</th>
                    <th>2435</th>
                    <th>2344</th>
                  </tr>
                  <tr>
                    <th>功能比</th>
                    <th>22</th>
                    <th>34</th>
                    <th>46</th>
                    <th>66</th>
                    <th>54</th>
                    <th>23</th>
                    <th>67</th>
                    <th>78</th>
                    <th>88</th>
                    <th>87</th>
                    <th>73</th>
                  </tr>
                  <tr>
                    <th rowspan="2">45</th>
                    <th>输入功率</th>
                    <th>3546</th>
                    <th>244</th>
                    <th>2324</th>
                    <th>2421</th>
                    <th>1234</th>
                    <th>1543</th>
                    <th>2541</th>
                    <th>3455</th>
                    <th>243</th>
                    <th>244</th>
                    <th>566</th>
                  </tr>
                  <tr>
                    <th>功能比</th>
                    <th>56</th>
                    <th>24</th>
                    <th>46</th>
                    <th>68</th>
                    <th>88</th>
                    <th>46</th>
                    <th>84</th>
                    <th>93</th>
                    <th>84</th>
                    <th>93</th>
                    <th>72</th>
                  </tr>
                </tbody>
              </table>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
// import moment from 'moment'
import Breadcrumb from '@/components/tools/Breadcrumb'
import MixLine from '@/components/CleanBaskDemo/mixLine'
import DoughnutChart from '@/components/CleanBaskDemo/doughnutChart'
import PowerBarChart from '@/components/CleanBaskDemo/powerBarChart'
import DischargeBarChart from '@/components/CleanBaskDemo/dischargeBarChart'
import { mixinDevice } from '@/utils/mixin'
const dataFirst = [
  {
    time: '00时',
    supplierTemperature: '12',
    returnTemperature: '22',
    houseTemperature: '20'
  }, {
    time: '01时',
    supplierTemperature: '16',
    returnTemperature: '18',
    houseTemperature: '32'
  }, {
    time: '02时',
    supplierTemperature: '19',
    returnTemperature: '19',
    houseTemperature: '27'
  }, {
    time: '03时',
    supplierTemperature: '20',
    returnTemperature: '23',
    houseTemperature: '34'
  }, {
    time: '04时',
    supplierTemperature: '19',
    returnTemperature: '29',
    houseTemperature: '33'
  }, {
    time: '05时',
    supplierTemperature: '23',
    returnTemperature: '30',
    houseTemperature: '30'
  }
]
const dataSecond = [
  {
    time: '06时',
    supplierTemperature: '31',
    returnTemperature: '31',
    houseTemperature: '29'
  }, {
    time: '07时',
    supplierTemperature: '12',
    returnTemperature: '27',
    houseTemperature: '20'
  }, {
    time: '08时',
    supplierTemperature: '18',
    returnTemperature: '18',
    houseTemperature: '32'
  }, {
    time: '09时',
    supplierTemperature: '19',
    returnTemperature: '19',
    houseTemperature: '27'
  }, {
    time: '10时',
    supplierTemperature: '33',
    returnTemperature: '23',
    houseTemperature: '34'
  }, {
    time: '11时',
    supplierTemperature: '29',
    returnTemperature: '29',
    houseTemperature: '33'
  }
]
const dataThird = [
  {
    time: '12时',
    supplierTemperature: '23',
    returnTemperature: '30',
    houseTemperature: '30'
  }, {
    time: '13时',
    supplierTemperature: '31',
    returnTemperature: '31',
    houseTemperature: '29'
  }, {
    time: '14时',
    supplierTemperature: '22',
    returnTemperature: '22',
    houseTemperature: '20'
  }, {
    time: '15时',
    supplierTemperature: '20',
    returnTemperature: '18',
    houseTemperature: '32'
  }, {
    time: '16时',
    supplierTemperature: '19',
    returnTemperature: '19',
    houseTemperature: '27'
  }, {
    time: '17时',
    supplierTemperature: '23',
    returnTemperature: '23',
    houseTemperature: '34'
  }
]
const dataFour = [
  {
    time: '18时',
    supplierTemperature: '31',
    returnTemperature: '29',
    houseTemperature: '33'
  }, {
    time: '19时',
    supplierTemperature: '12',
    returnTemperature: '30',
    houseTemperature: '30'
  }, {
    time: '20时',
    supplierTemperature: '18',
    returnTemperature: '31',
    houseTemperature: '29'
  }, {
    time: '21时',
    supplierTemperature: '19',
    returnTemperature: '15',
    houseTemperature: '37'
  }, {
    time: '22时',
    supplierTemperature: '33',
    returnTemperature: '12',
    houseTemperature: '35'
  }, {
    time: '23时',
    supplierTemperature: '18',
    returnTemperature: '17',
    houseTemperature: '32'
  }
]
const loadData = [
  {
    orderNumber: 'ABBBB-CC',
    userName: '三三二',
    userConnect: '郭靖',
    userTelephone: '13909987366',
    repairCompany: '三把起子',
    repairPerson: '闪电1号',
    orderStatus: '维修中',
    repairTime: '2020/1/26'
  }
]
export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    MixLine,
    DoughnutChart,
    PowerBarChart,
    DischargeBarChart,
    Breadcrumb
  },
  data () {
    return {
      currentPro: {}, // 当前产品详情
      isShowText: true,
      isShowRes: false,
      isShowText1: true,
      isShowRes1: false,
      loading: true,
      dataFirst,
      dataSecond,
      dataThird,
      dataFour,
      loadData,
      // 表头
      columnsB: [
        {
          title: '工单号',
          width: '10%',
          dataIndex: 'orderNumber'
        }, {
          title: '用户姓名',
          width: '10%',
          dataIndex: 'userName'
        }, {
          title: '联系人',
          width: '10%',
          dataIndex: 'userConnect'
        }, {
          title: '联系电话',
          width: '10%',
          dataIndex: 'userTelephone'
        }, {
          title: '维修公司',
          width: '12%',
          dataIndex: 'repairCompany'
        }, {
          title: '维修人员',
          width: '10%',
          dataIndex: 'repairPerson'
        },
        {
          title: '工单状态',
          width: '10%',
          dataIndex: 'orderStatus'
        },
        {
          title: '维修时间',
          width: '10%',
          dataIndex: 'repairTime'
        }
      ],
      columns: [
        {
          title: '时间',
          width: '40%',
          dataIndex: 'time'
        }, {
          title: '供水温度',
          width: '20%',
          dataIndex: 'supplierTemperature'
        }, {
          title: '回水温度',
          width: '20%',
          dataIndex: 'returnTemperature'
        }, {
          title: '室内温度',
          width: '20%',
          dataIndex: 'houseTemperature'
        }
      ]
    }
  },
  created () {
    this.getBreadCrumb()
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    console.log('----', this.currentPro)
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      this.breadList[2].meta.title = '设备运行监控详情'
    },
    seetingParamers () {
      this.$success({
        title: '设置成功'
      })
    },
    resetting () {
      this.$success({
        title: '复位成功'
      })
    },
    unusualTest () {
      console.log('1111')
      this.$warning({
        title: '异常诊断中，请等候...'
      })
      setTimeout(() => {
        this.$success({
          title: '异常诊断成功'
        })
        this.isShowText = false
        this.isShowRes = true
      }, 1000)
    },
    unusualTest1 () {
      console.log('1111')
      this.$warning({
        title: '异常诊断中，请等候...'
      })
      setTimeout(() => {
        this.$success({
          title: '异常诊断成功'
        })
        this.isShowText1 = false
        this.isShowRes1 = true
      }, 1000)
    },
    testRes () {
      this.$success({
        title: '当前异常为：水压异常'
      })
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  margin:0;
  padding:0;
}
li {
  list-style:none;
  height:16px;
  background-color: #eee;
  margin-bottom:8px;
  font-size:4px;
}
// .card-child {
//   padding:10px;
//   background-color: #F8F8F8;
//   box-shadow: 2px 2px 2px 1px rgba(0,0,0,.15);
// }
.div-p p {
  margin:0;
  padding:0;
}
.common-card {
  height: 205px;
}
.text-p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cardTitle {
  font-weight: 700;
  color: rgba(0, 0, 0, 1);
}
/deep/.ant-card-body {
 padding: 10px 10px;
}
.imgBox {
  width: 60px;
  height: 150px;
}
.img {
  width: 60px;
  height: 150px;
}
.img-box {
  width: 380px;
  height: 225px;
  margin-bottom:5px;
}
.img-img {
  display:inline-block;
  width: 380px;
  height: 225px;
}
/deep/.total[data-v-680098e4] {
  height: 130px;
}
/deep/.chart-card-footer[data-v-680098e4] {
  border: 0;
}
.outBox {
  display: flex;
}

.rightBox P{
  font-size: 2px;
  margin:2px 0;
}
.top-p {
  font-size:14px;
}
.bottom-p {
  font-size: 18px;
  font-weight:700;
}
.col-box-ver {
  width:1px;
  height:60px;
}
.seeting {
  display:flex;
  justify-content: space-between;
  align-items: center;
}
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
